<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="list"></ul>
  <script>
    var arr = [
      {"name":"小明","age":12,"sex":"男"},
      {"name":"小红","age":11,"sex":"女"},
      {"name":"小强","age":13,"sex":"男"},
    ]

    var list = document.getElementById('list');

    //遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
    for(let i = 0;i < arr.length; i++){
      list.innerHTML += [
        '<li>',
        '  <div class="hd">' + arr[i].name + '</div>',
        '  <div class="bd">',
        '    <p>姓名：' + arr[i].name + '</p>',
        '    <p>年龄：' + arr[i].age + '</p>',
        '    <p>性别：' + arr[i].sex + '</p>',
        '  </div>',
        '</li>',
      ].join('');
    }

    var str = [
      '<li>',
      '  <div class="hd"></div>',
      '  <div class="bd">',
      '    <p>姓名：</p>',
      '    <p>年龄：</p>',
      '    <p>性别：</p>',
      '  </div>',
      '</li>',
    ].join('');
    console.log(str);
  </script>
</body>
</html>